<template>
  <div>
    <Head title="基础信息" isBack>
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm"
          :detail="data.detailData"
          :labelWidth="60"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="权限范围">
      <template #content>
        <el-tabs v-model="activeTab" class="demo-tabs">
          <el-tab-pane label="电站数据权限" name="station">
            <Detail
              :columns="1"
              :form="detailForm1"
              :detail="data.detailData"
              :labelWidth="60"
              align="left"
            ></Detail>
          </el-tab-pane>
          <el-tab-pane label="用户数据权限" name="user">
            <Detail
              :columns="1"
              :form="detailForm2"
              :detail="data.detailData"
              :labelWidth="60"
              align="left"
            ></Detail>
          </el-tab-pane>
          <el-tab-pane label="分润数据权限" name="clear">
            <Detail
              :columns="1"
              :form="detailForm3"
              :detail="data.detailData"
              :labelWidth="80"
              align="left"
            ></Detail>
          </el-tab-pane>
          <el-tab-pane label="功能菜单权限" name="menu">
            <Detail
              :columns="1"
              :form="detailForm4"
              :detail="data.detailData"
              :labelWidth="80"
              align="left"
            ></Detail>
          </el-tab-pane>
        </el-tabs>
      </template>
    </Head>
  </div>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import { getDetailInfo } from '@/service/apis/auth';
import { AUTH_STATION, AUTH_USER, AUTH_SHARE } from '@/utils/dictionaries';

const route = useRoute();
const {
  query: { id },
} = route;

let activeTab = ref('station');
const detailForm = reactive([
  {
    label: '角色名称',
    prop: 'roleName',
  },
]);
const detailForm1 = reactive([
  {
    label: '限制权限',
    prop: 'stationType',
    comName: 'radio',
    dic: AUTH_STATION,
  },
]);
const detailForm2: any = reactive([
  {
    label: '限制权限',
    prop: 'userType',
    comName: 'radio',
    dic: AUTH_USER,
  },
]);
const detailForm3 = reactive([
  {
    label: '分润数据权限',
    prop: 'clearingType',
    comName: 'radio',
    dic: AUTH_SHARE,
  },
]);
const detailForm4 = reactive([
  {
    label: '功能菜单权限',
    prop: 'menuDetails',
    comName: 'tree',
    dic: [] as any,
  },
]);
const data = reactive({
  detailData: {} as any,
});
getDetailInfo({ id: id }).then((res: any) => {
  console.log('res---', res);
  data.detailData = res;
  data.detailData.stationType = res.stationTree.type;
  data.detailData.userType = res.userTree.type;
  data.detailData.clearingType = res.clearingTree.type;

  if (res.stationTree.type === 'ORG' || res.stationTree.type === 'STATION') {
    data.detailData.stationDetails = res.stationTree.treeData;
    detailForm1.push({
      label: '',
      prop: 'stationDetails',
      comName: 'tree',
      dic: data.detailData?.stationDetails,
    });
  }

  if (res.userTree.type === 'ORG') {
    data.detailData.userDetails = res.userTree.treeData;
    detailForm2.push({
      label: '',
      prop: 'userDetails',
      comName: 'tree',
      dic: data.detailData?.userDetails,
    });
  }

  if (res.clearingTree.type === 'ORG' || res.clearingTree.type === 'USER') {
    detailForm3.push({
      label: '',
      prop: 'clearingDetails',
      comName: 'tree',
      dic: res.clearingTree?.treeData,
    });
  }
  detailForm4[0].dic = res.menuTree?.treeData;
});
</script>